<template>
  <view class="box">
    <view class="top1" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <view class="title">帮帮同城</view>
      <view class="userInfo">
        <div class="flex user-photo">
          <image
            :src="
              userInfo.image || 'https://pic.bangbangtongcheng.com/static/my/header.png'
            "
            class="header-img"
          />
          <div class="flex label-box">
            <!-- <div class="shop-label" v-if="userInfo.isShop == 1"> -->
            <div class="shop-label" v-if="userInfo.isShop == 1">
              <image
                src="https://pic.bangbangtongcheng.com/static/my/tag.png"
                mode=""
              ></image>
              <text>商家</text>
            </div>
            <!-- <div class="agent-label" v-if="userInfo.isAgent == 1 && userInfo.shopType == 1"> -->
            <div class="agent-label" v-if="userInfo.isAgent == 1">
              <image
                src="https://pic.bangbangtongcheng.com/static/my/tag.png"
                mode=""
              ></image>
              <text>经纪人</text>
            </div>
          </div>
        </div>
        <!-- #ifdef APP-PLUS -->
        <view class="user" v-if="userInfo.phone">
          <view class="name">
            <view class="user-name">{{ userInfo.nikeName }}</view>
            <view class="user-label">
              <view class="vip-label">
                <view class="vip-level">
                  <!-- <text class="vip-rank" @click="goMyLevel"> -->
                  <text
                    class="vip-rank"
                    @click="goMyLevel"
                    :style="{
                      color: colors[userInfo.memberLevel - 1].wordColor,
                      backgroundColor: colors[userInfo.memberLevel - 1].bgColor,
                      borderColor: colors[userInfo.memberLevel - 1].lineColor,
                    }"
                  >
                    {{ userInfo.memberLevelTitle }}
                  </text>
                  <text class="all-dot">累计帮帮豆：{{ userInfo.integral }}</text>
                </view>
                <view class="star-vip">
                  <view class="">
                    <!-- <image v-for="item in starLevel" :key="item" src="../../static/star-f.png"
											mode=""></image>
										<image v-for="item in 5-starLevel" :key="item" src="../../static/star-e.png"
											mode=""></image> -->
                    <u-rate
                      :value="userInfo.score"
                      :readonly="true"
                      activeColor="#FCDB81"
                      inactiveColor="#fff"
                    >
                    </u-rate>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="info" @click.stop="set">个人信息</view>
        </view>
        <view class="user" @click="login" v-else>
          <view class="name">
            <view class="user-name">点击登录</view>
            <view class="info" @click.stop="set">个人信息</view>
          </view>
        </view>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <button
          open-type="getUserInfo"
          class="user"
          v-if="!userInfo.phone"
          @getuserinfo="getuserinfo"
        >
          <view class="name">
            <view class="user-name">点击登录</view>
            <view class="info" @click="geren">个人信息</view>
          </view>
        </button>
        <view class="user" v-else>
          <view class="name">
            <view class="user-name">{{ userInfo.nikeName }}</view>
            <view class="user-label">
              <view class="vip-label">
                <view class="vip-level">
                  <text
                    class="vip-rank"
                    @click="goMyLevel"
                    :style="{
                      color: colors[userInfo.memberLevel - 1].wordColor,
                      backgroundColor: colors[userInfo.memberLevel - 1].bgColor,
                      borderColor: colors[userInfo.memberLevel - 1].lineColor,
                    }"
                  >
                    {{ userInfo.memberLevelTitle }}
                  </text>
                  <text class="all-dot">累计帮帮豆：{{ userInfo.integral }}</text>
                </view>
                <view class="star-vip">
                  <view class="">
                    <u-rate
                      :value="userInfo.score"
                      :readonly="true"
                      activeColor="#FCDB81"
                      inactiveColor="#fff"
                    >
                    </u-rate>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="info" @click="set">个人信息</view>
        </view>
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <view class="user" v-if="userInfo.phone">
          <view class="name">
            <view class="user-name">{{ userInfo.nikeName }}</view>
            <view class="user-label">
              <view class="vip-label">
                <view class="vip-level">
                  <text
                    class="vip-rank"
                    @click="goMyLevel"
                    :style="{
                      color: colors[userInfo.memberLevel - 1].wordColor,
                      backgroundColor: colors[userInfo.memberLevel - 1].bgColor,
                      borderColor: colors[userInfo.memberLevel - 1].lineColor,
                    }"
                  >
                    {{ userInfo.memberLevelTitle }}
                  </text>
                  <text class="all-dot">累计帮帮豆：{{ userInfo.integral }}</text>
                </view>
                <view class="star-vip">
                  <view class="">
                    <u-rate
                      :value="userInfo.score"
                      :readonly="true"
                      activeColor="#FCDB81"
                      inactiveColor="#fff"
                    >
                    </u-rate>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="info" @click.stop="set">个人信息</view>
        </view>
        <view class="user" @click="login" v-else>
          <view class="name">
            <view class="user-name">点击登录</view>
            <view class="info" @click.stop="set">个人信息</view>
          </view>
        </view>
        <!-- #endif -->
        <image
          class="set"
          @click="setting"
          src="https://pic.bangbangtongcheng.com/static/my/set.png"
        />
      </view>
      <view class="function">
        <view class="grid margin-bottom text-center col-4" style="margin-bottom: 0">
          <view class="block" @click="tiaozhuan(1)">
            <image src="https://pic.bangbangtongcheng.com/static/my/icon1.png" />
            <view>我的发布</view>
          </view>
          <view
            class="block"
            @click="tiaozhuan(6)"
            v-if="
              (userInfo.isShop == 1 || userInfo.isAgent == 1) && userInfo.shopType != 2
            "
          >
            <image src="https://pic.bangbangtongcheng.com/static/my/icon6.png" />
            <view>门店房源</view>
          </view>
          <view class="block" @click="tiaozhuan(2)">
            <image src="https://pic.bangbangtongcheng.com/static/my/icon2.png" />
            <view>浏览记录</view>
          </view>

          <view class="block" @click="tiaozhuan(3)">
            <image src="https://pic.bangbangtongcheng.com/static/my/icon3.png" />
            <view>我的收藏</view>
          </view>

          <view
            class="block"
            @click="renzheng(2)"
            v-if="userInfo.isShop == 1 && userInfo.shopType != 2"
          >
            <image src="https://pic.bangbangtongcheng.com/static/jjrgl01.png" />
            <view>经纪人管理</view>
          </view>

          <view class="block" @click="tiaozhuan(4)">
            <image src="https://pic.bangbangtongcheng.com/static/my/icon4.png" />
            <view>问题反馈</view>
          </view>
          <view class="block" @click="tiaozhuan(5)">
            <image src="https://pic.bangbangtongcheng.com/static/my/icon5.png" />
            <view>举报管理</view>
          </view>
          <view class="block" @click="tiaozhuan(7)">
            <image src="https://pic.bangbangtongcheng.com/static/my/icon7.png" />
            <view>我的工具</view>
          </view>
        </view>
      </view>
    </view>

    <view class="kapian">
      <view
        class="li"
        @click="renzheng(1)"
        v-if="userInfo.isShop == 0 && userInfo.isAgent == 0"
      >
        <image src="https://pic.bangbangtongcheng.com/static/geren_1.png" />
        <p>商家认证</p>
      </view>
      <view
        class="li"
        @click="renzheng(3)"
        v-if="userInfo.isAgent == 0 && userInfo.shopType != 2"
      >
        <image src="https://pic.bangbangtongcheng.com/static/geren_3.png" />
        <p>经纪人认证</p>
      </view>
      <view
        class="li"
        @click="renzheng(4)"
        v-if="(userInfo.isAgent == 1 || userInfo.isShop == 1) && userInfo.shopType != 2"
      >
        <image src="https://pic.bangbangtongcheng.com/static/geren_4.png" />
        <p>个人房源</p>
      </view>
      <view
        class="li"
        @click="renzheng(5)"
        v-if="(userInfo.isAgent == 1 || userInfo.isShop == 1) && userInfo.shopType != 2"
      >
        <image src="https://pic.bangbangtongcheng.com/static/shareHouse.png" />
        <p>共享房源</p>
      </view>
    </view>
    <view class="tit" v-if="tipsList.length">
      <p class="p1">购房贴士</p>
      <p class="p2" @click="tipslist">更多></p>
    </view>
    <view
      class="list"
      v-for="(item, index) in tipsList"
      @click="tipsDetail(item.id)"
      :key="index"
    >
      <span class="p1">{{ item.title }}</span>
      <span class="p2">{{ item.create_date }}</span>
    </view>
    <view-tabbar :selected="4" ref="viewTabbar"></view-tabbar>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
//#ifdef H5
import wxshare from "../../utils/index.js";
//#endif
import Tabbar from "@/components/tabbar.vue";
// import './index.css'
export default {
  data() {
    return {
      starLevel: 4,
      // data: "",
      // sar: 1720.12999999999999,
      // imgaeUrl: this.$imgSrc,
      // servicephone: "",
      // user_id: uni.getStorageSync("user_id"),
      // info: {},
      imgUrl: this.$imgSrc,
      published: false,
      phone: "",
      userInfo: uni.getStorageSync("Pduser"),
      tipsList: [],
      userInfo1: {
        openid: "",
        headimgurl: "",
        nickname: "",
        unionid: "",
      },
      autoStatus: true,
      system: "",
      platform: "",
      vipData: {},
      colors: [
        {
          bgColor: "#E9EFEF",
          wordColor: "#60807D",
          lineColor: "#B6C4C3",
          level: "青铜会员",
        },
        {
          bgColor: "#F7F7F7",
          wordColor: "#A3AAB0",
          lineColor: "#D2D9E0",
          level: "白银会员",
        },
        {
          bgColor: "#FFF8DE",
          wordColor: "#CEAB21",
          lineColor: "#D3CAB2",
          level: "黄金会员",
        },
        {
          bgColor: "#EDFAFF",
          wordColor: "#59B0E6",
          lineColor: "#BBD0DB",
          level: "铂金会员",
        },
        {
          bgColor: "#F2F5FF",
          wordColor: "#284EB6",
          lineColor: "#C1CBEF",
          level: "钻石会员",
        },
        {
          bgColor: "#FDF7FF",
          wordColor: "#A877C6",
          lineColor: "#DBC6E8",
          level: "钻石Ⅰ会员",
        },
        {
          bgColor: "#F8F2FF",
          wordColor: "#78439F",
          lineColor: "#958AC3",
          level: "钻石Ⅱ会员",
        },
        {
          bgColor: "#F4F2F2",
          wordColor: "#8D4581",
          lineColor: "#907B8C",
          level: "钻石Ⅲ会员",
        },
        {
          bgColor: "#F4F2F2",
          wordColor: "#502E30",
          lineColor: "#795D5E",
          level: "王者会员",
        },
      ],
    };
  },
  components: {
    "view-tabbar": Tabbar,
  },
  onLoad(opts) {
    this.phone = this.userInfo.phone;
    this.published = opts.published;
    uni.hideTabBar();
    // this.getVip()
    // #ifdef H5
    this.jinzhi();
    this.userInfo = uni.getStorageSync("Pduser");

    // #endif

    // #ifdef MP-WEIXIN
    this.wxlogin();
    // #endif
    this.getTips();
    uni.getSystemInfo({
      success: (res) => {
        this.system = res.system.substring(4, 6);
        this.platform = res.platform;
      },
      fail: (err) => {},
      complete: () => {},
    });
  },
  onReady() {},
  onShow(opts) {
    // console.log(uni.getStorageSync("Pduser"));
    this.userInfo = uni.getStorageSync("Pduser");
    console.log();
    this.phone = this.userInfo.phone;
    if (this.phone) {
      this.getUserPhone();
      this.$nextTick(() => {
        this.$refs.viewTabbar.fnc();
      });
    }
  },
  computed: {
    ...mapGetters(["statusBarHeight1", "userinfo"]),
  },
  methods: {
    // 获取会员数据
    getVip() {
      this.$myRequest
        .post("/mob/iteration/getClubInfo", {
          userId: this.userInfo.id,
        })
        .then((res) => {
          console.log(111111111111, res);
          this.vipData = res.userInfo;
        });
    },

    // 点击会员
    goMyLevel() {
      uni.navigateTo({
        url: "/pages_my/bangClub",
      });
    },
    tiaozhuan(num) {
      if (!this.userInfo.phone) {
        uni.showToast({
          title: "请先登录",
          icon: "none",
          mask: true,
        });
        return;
      }
      if (num == 1) {
        uni.navigateTo({
          url: "/pages_my/myIssue",
        });
      } else if (num == 2) {
        uni.navigateTo({
          url: "/pages_my/record",
        });
      } else if (num == 3) {
        uni.navigateTo({
          url: "/pages_my/collect",
        });
      } else if (num == 4) {
        uni.navigateTo({
          url: "/pages_my/problem",
        });
      } else if (num == 5) {
        uni.navigateTo({
          url: "/pages_my/report",
        });
      } else if (num == 6) {
        uni.navigateTo({
          url: "/pages_my/allHousing",
        });
      } else if (num == 7) {
        uni.navigateTo({
          url: "/pages_my/tool",
        });
      }
    },
    renzheng(num) {
      if (!this.userInfo.phone) {
        uni.showToast({
          title: "请先登录",
          icon: "none",
          mask: true,
        });
        return;
      }
      if (num == 1) {
        uni.navigateTo({
          url: "/pages_my/enter_merchant",
        });
      } else if (num == 2) {
        uni.navigateTo({
          url: "/pages_my/regulatorBroker",
        });
      } else if (num == 3) {
        let url = "/pages_my/enterBroker";
        if (this.userInfo.shopId) {
          url = url + "?shopId=" + this.userInfo.shopId;
        }
        uni.navigateTo({
          url: url,
        });
      } else if (num == 4) {
        uni.navigateTo({
          url: "/pages_my/personage",
        });
      } else if (num == 5) {
        uni.navigateTo({
          url: "/pages_my/shareHouse",
        });
      }
    },
    geren() {
      uni.navigateTo({
        url: "/pages_my/details",
      });
    },
    getTips() {
      let that = this;
      this.$myRequest
        .get("/mob/home/getTipsInfo", {
          // phone: this.phone,
        })
        .then((res) => {
          this.tipsList = res.page.list;
          // this.userInfo = res.userInfo;
          // uni.setStorageSync("Pduser", res.userInfo);
          // that.$store.dispatch("user/login", res.userInfo);
        });
    },
    set() {
      console.log(111111111111111);
      if (!this.userInfo.phone) {
        uni.showToast({
          title: "请先登录",
          icon: "none",
          mask: true,
        });
        return;
      }
      uni.navigateTo({
        url: "/pages_my/set",
      });
    },
    setting() {
      if (!this.userInfo.phone) {
        uni.showToast({
          title: "请先登录",
          icon: "none",
          mask: true,
        });
        return;
      }
      uni.navigateTo({
        url: "/pages_my/setting",
      });
    },
    geren() {
      uni.navigateTo({
        url: "/pages_my/details",
      });
    },

    wxlogin() {
      console.log(222222);
      uni.login({
        provider: "weixin",
        success: (res) => {
          // console.log(res);
          // let appId = "wx851c3ae7614fc651";
          // let secret = "4627cfbbc6d1eff1fd46c249d5e5604b";
          this.$myRequest
            .get("/mob/login/getOpenId", {
              code: res.code,
              // appId,
              // secret
            })
            .then((res) => {
              // console.log(res);
              this.userInfo1.openid = res.unionid;
			  this.userInfo1.xOpenid = res.openId;
              uni.setStorageSync("sessionKey", res.sessionkey);
              // this.userInfo1.unionid = ;
            });
        },
        fail: (error) => {
          console.log(error);
        },
      });
    },

    getuserinfo(data) {
      let datas = data.detail.userInfo;
      console.log(datas);
      if (datas) {
        this.userInfo1.nickname = datas.nickName;
        this.userInfo1.headimgurl = datas.avatarUrl;
      } else {
        this.userInfo1.nickname = "";
        this.userInfo1.headimgurl = "";
      }
      this.getUser();
    },
    getUser() {
      let that = this;
      this.$myRequest
        .get("/mob/login/getUserByWXOpenId", {
          openId: this.userInfo1.openid,
        })
        .then((res) => {
          this.userInfo = res.userInfo;
          uni.setStorageSync("userInfo", JSON.stringify(this.userInfo1));
          if (res.userInfo == {} || !res.userInfo.phone) {
            uni.showToast({
              title: "未绑定手机号，前往绑定手机号",
              icon: "none",
              mask: true,
            });
            setTimeout(function () {
              uni.navigateTo({
                url: "/pages/login/phoneLogin",
              });
            }, 1500);
          } else {
            uni.setStorageSync("Pduser", res.userInfo);
            that.$store.dispatch("user/login", res.userInfo);
          }
        });
    },
    getUserPhone() {
      console.log("234");
      let that = this;
      this.phone = this.userInfo.phone;
      this.$myRequest
        .get("/mob/login/getUserInfoByPhone", {
          phone: this.phone,
        })
        .then((res) => {
          this.userInfo = res.userInfo;
          uni.setStorageSync("Pduser", res.userInfo);
          that.$store.dispatch("user/login", res.userInfo);
        });
    },
    jinzhi() {
      let _this = this;
      let param = window.location.href.split("#")[0];
      uni.request({
        method: "post",
        data: {
          url: param,
        },
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
        success(re) {
          _this.jinzhifx(re.data);
        },
      });
    },
    jinzhifx(data) {
      wxshare.config({
        debug: false, //是否打开调试
        appId: data.appId, // 公众号的唯一标识
        timestamp: data.timestamp, // 生成签名的时间戳
        nonceStr: data.nonce, // ，生成签名的随机串
        signature: data.signature, // 签名
        jsApiList: ["hideMenuItems"],
      });
      // 禁止分享
      wxshare.hideMenuItems({
        // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
        menuList: [
          "menuItem:share:appMessage",
          "menuItem:share:timeline",
          "menuItem:share:timeline",
          "menuItem:share:qq",
          "menuItem:favorite",
          "menuItem:share:QZone",
          "menuItem:openWithSafari",
        ],
      });
    },
    login() {
      //#ifdef H5
      this.getuniID();
      //#endif
      uni.navigateTo({
        url: "/pages/login/login",
      });
    },
    getuniID() {
      let userInfo = uni.getStorageSync("userInfo");
      if (!userInfo.openid) {
        return false;
      }
      let that = this;
      this.$myRequest
        .get("/mob/login/getUserByWXOpenId", {
          openId: userInfo.openid,
        })
        .then((res) => {
          this.userInfo = res.userInfo;
          if (!res.userInfo.phone) {
            if (res.userInfo == {} || !res.userInfo.phone) {
              uni.showToast({
                title: "请绑定手机号",
                icon: "none",
                mask: true,
              });
              setTimeout(function () {
                uni.navigateTo({
                  url: "/pages/login/register",
                });
              }, 1500);
            }
          } else {
            uni.setStorageSync("Pduser", res.userInfo);
            that.$store.dispatch("user/login", res.userInfo);
            setTimeout(function () {
              uni.navigateBack({
                delta: 1,
              });
            }, 500);
          }
        });
    },
    tipslist() {
      uni.navigateTo({
        url: "/pages_my/tipsList",
      });
    },
    tipsDetail(id) {
      uni.navigateTo({
        url: "/pages_my/tipsDetail?id=" + id,
      });
    },
    // 判断是否支持一键登陆
    // isAutoLogin() {
    // 	let _that = this
    // 	uni.getProvider({ //获取可用的服务提供商
    // 		service: 'oauth',
    // 		success: function(res) {
    // 			console.log(res.provider) // ['weixin', qq', 'univerify']
    // 		}
    // 	});
    // 	uni.preLogin({ //预登录
    // 		provider: 'univerify', //用手机号登录
    // 		success() {
    // 			_that.autoStatus = true
    // 			console.log(_that.platform,'预登录成功')
    // 	if (_that.platform=='ios' || _that.platform=='IOS') {
    // 		_that.submitlogin()
    // 	}else{
    // 		_that.submitAndroid()
    // 	}
    // 		},
    // 		fail(err) { //预登录失败
    // 			_that.autoStatus = false
    // 			console.log('错误码：' + err.errCode)
    // 			console.log(err.errMsg);
    // 			if(!_that.autoStatus){
    // 				uni.showToast({
    // 					title: err.errMsg,
    // 					icon: "none",
    // 					mask: true
    // 				});
    // 		uni.navigateTo({
    // 		  url: "/pages/login/login"
    // 		});
    // 				return;
    // 			}
    // 		}
    // 	})
    // },
    submitlogin() {
      let that = this;
      uni.login({
        //正式登录，弹出授权窗
        provider: "univerify",
        univerifyStyle: {
          // 自定义登录框样式
          fullScreen: true, // 是否全屏显示，true表示全屏模式，false表示非全屏模式，默认值为false。
          backgroundColor: "#ffffff", // 授权页面背景颜色，默认值：#ffffff
          icon: {
            path: "/static/logo.png", // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
          },
          phoneNum: {
            color: "#2281F5", // 手机号文字颜色 默认值：#000000
          },
          authButton: {
            normalColor: "#64b6a8", // 授权按钮正常状态背景颜色 默认值：#3479f5
            highlightColor: "#64b6a8", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
            disabledColor: "#64b6a8", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
            textColor: "#ffffff", // 授权按钮文字颜色 默认值：#ffffff
            title: "本机号码一键登录", // 授权按钮文案 默认值：“本机号码一键登录”
          },
          otherLoginButton: {
            visible: false, // 是否显示其他登录按钮，默认值：true
          },
          privacyTerms: {
            defaultCheckBoxState: true, // 条款勾选框初始状态 默认值： true
            uncheckedImage: "", // 可选 条款勾选框未选中状态图片（仅支持本地图片 建议尺寸 24x24px）(3.2.0+ 版本支持)
            checkedImage: "", // 可选 条款勾选框选中状态图片（仅支持本地图片 建议尺寸24x24px）(3.2.0+ 版本支持)
            checkBoxSize: 12, // 可选 条款勾选框大小，仅android支持
            textColor: "#666666", // 文字颜色 默认值：#BBBBBB
            termsColor: "#64B6A8", //  协议文字颜色 默认值： #5496E3
            prefix: "已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”
            suffix: " ", // 条款后的文案 默认值：“并使用本机号码登录”
            privacyItems: [
              // 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效
              {
                url: "https://bangbangtongcheng.com/agreement.html", // 点击跳转的协议详情页面
                title: "帮帮同城隐私协议", // 协议名称
              },
              {
                url: "https://bangbangtongcheng.com/agreement2.html", // 点击跳转的协议详情页面
                title: "帮帮同城用户协议", // 协议名称
              },
            ],
          },
          buttons: {
            // 自定义页面下方按钮仅全屏模式生效（3.1.14+ 版本支持）
            iconWidth: "45px", // 图标宽度（高度等比例缩放） 默认值：45px
            list: [
              {
                provider: "phone",
                iconPath: "/static/phone.png", // 图标路径仅支持本地图片
              },
              {
                provider: "weixin",
                iconPath: "/static/wx.png", // 图标路径仅支持本地图片
              },
              {
                provider: "apple",
                iconPath: "/static/apple.png", // 图标路径仅支持本地图片
              },
              {
                provider: "Alipay",
                iconPath: "/static/Alipay.png", // 图标路径仅支持本地图片
              },
            ],
          },
        },
        success(res) {
          // 正式登录成功
          console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}

          // 在得到access_token后，通过callfunction调用云函数
          uniCloud.callFunction({
            name: "uni-getPhone", // 云函数名称
            data: {
              //传给云函数的参数
              access_token: res.authResult.access_token, // 客户端一键登录接口返回的access_token
              openid: res.authResult.openid, // 客户端一键登录接口返回的openid
            },
            success(callRes) {
              // console.log('调用云函数成功' + JSON.stringify(callRes))
              console.log("手机号登陆" + callRes.result.phoneNumber);
              that.$myRequest
                .post("/mob/login/phoneOneClickLogin", {
                  phone: callRes.result.phoneNumber,
                })
                .then((res) => {
                  console.log("手机号登陆结果:" + res);
                  uni.setStorageSync("Pduser", res.userInfo);
                  that.$store.dispatch("user/login", res.userInfo);
                  setTimeout(function () {
                    that.userInfo = uni.getStorageSync("Pduser");
                    that.phone = that.userInfo.phone;
                    if (that.phone) {
                      that.getUserPhone();
                      // that.$nextTick(()=>{
                      that.$refs.viewTabbar.fnc();
                      uni.hideLoading();
                      // })
                    }
                  }, 500);
                  uni.closeAuthView(); //关闭授权登录界面
                });
            },
            fail(callErr) {
              uni.showToast({
                title: "授权失败",
                icon: "none",
                mask: true,
              });
              console.log("调用云函数出错" + callErr);
              uni.closeAuthView(); //关闭授权登录界面
            },
            // complete() {
            // 	uni.closeAuthView() //关闭授权登录界面
            // }
          });
        },
        fail(err) {
          // 正式登录失败
          if (err.provider == "phone") {
            uni.navigateTo({
              url: "/pages/login/login",
            });
          } else if (err.provider == "weixin") {
            that.handleThirdLoginApp();
            return;
          } else if (err.provider == "apple") {
            that.appleLogin();
            return;
          } else if (err.provider == "Alipay") {
            that.alipayLogin();
            return;
          }
        },
      });
    },
    // 支付宝登录
    alipayLogin() {
      let that = this;
      const plug = uni.requireNativePlugin("Html5app-AlipayAuth");
      if (that.platform == "ios" || that.platform == "IOS") {
        plug.login(
          {
            appid: "2021003144632733",
            urlscheme: "convenAlilogin",
          },
          (ret) => {
            if (ret.code == 0) {
              console.log(ret.result.auth_code, "-------");
              let auth_code = ret.result.auth_code;
              that.$myRequest
                .get("/mob/login/aliLogin", {
                  code: auth_code,
                })
                .then((res) => {
                  console.log(res);
                  if (res.userInfo.phone) {
                    uni.showLoading({
                      title: "登录中...",
                    });
                    uni.setStorageSync("Pduser", res.userInfo);
                    that.$store.dispatch("user/login", res.userInfo);
                    setTimeout(function () {
                      that.userInfo = uni.getStorageSync("Pduser");
                      that.phone = that.userInfo.phone;
                      if (that.phone) {
                        that.getUserPhone();
                        // that.$nextTick(()=>{
                        that.$refs.viewTabbar.fnc();
                        uni.hideLoading();
                        // })
                      }
                    }, 500);
                  } else {
                    let userInfo = {
                      nickname: res.userInfo.nikeName,
                      headimgurl: res.userInfo.image,
                      zfbOpenid: res.userInfo.zfbOpenid,
                    };
                    uni.setStorageSync("userInfo", JSON.stringify(userInfo));
                    uni.showToast({
                      title: "未绑定手机号，前往绑定手机号",
                      icon: "none",
                      mask: true,
                    });
                    setTimeout(function () {
                      uni.navigateTo({
                        url: "/pages/login/register",
                      });
                    }, 1500);
                  }
                });
            } else {
              uni.showToast({
                title: "授权失败",
                icon: "none",
                mask: true,
              });
            }
          }
        );
      } else {
        plug.login(
          {
            appid: "2021003144632733",
          },
          (ret) => {
            if (ret.code == 0) {
              console.log(ret.result.auth_code, "-------");
              let auth_code = ret.result.auth_code;
              that.$myRequest
                .get("/mob/login/aliLogin", {
                  code: auth_code,
                })
                .then((res) => {
                  console.log(res);
                  if (res.userInfo.phone) {
                    uni.showLoading({
                      title: "登录中...",
                    });
                    uni.setStorageSync("Pduser", res.userInfo);
                    that.$store.dispatch("user/login", res.userInfo);
                    setTimeout(function () {
                      that.userInfo = uni.getStorageSync("Pduser");
                      that.phone = that.userInfo.phone;
                      if (that.phone) {
                        that.getUserPhone();
                        // that.$nextTick(()=>{
                        that.$refs.viewTabbar.fnc();
                        uni.hideLoading();
                        // })
                      }
                    }, 500);
                  } else {
                    let userInfo = {
                      nickname: res.userInfo.nikeName,
                      headimgurl: res.userInfo.image,
                      zfbOpenid: res.userInfo.zfbOpenid,
                    };
                    uni.setStorageSync("userInfo", JSON.stringify(userInfo));
                    uni.showToast({
                      title: "未绑定手机号，前往绑定手机号",
                      icon: "none",
                      mask: true,
                    });
                    setTimeout(function () {
                      uni.navigateTo({
                        url: "/pages/login/register",
                      });
                    }, 1500);
                  }
                });
            } else {
              uni.showToast({
                title: "授权失败",
                icon: "none",
                mask: true,
              });
            }
          }
        );
      }

      // let urls='https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=2021003144632733&scope=auth_userinfo&redirect_uri=https://conven.lefenglian.top/conven/mob/login/alipayAuthorizedCallback';
      // urls=encodeURIComponent(urls);
      // plus.runtime.openURL(
      //     'alipays://platformapi/startapp?appId=20000067&url=' + urls,
      //     res => {
      // 	//这里写打开URL地址失败后的处理
      //       console.log(res);
      //       uni.showModal({
      //         content: '本机未检测到对应客户端，是否打开浏览器访问页面？',
      //         success: function (res) {
      //           if (res.confirm) {
      //             //plus.runtime.openURL();
      //           }
      //         }
      //       });
      //     },
      //     'com.eg.android.AlipayGphone'
      //   );
      // this.$myRequest.get("/mob/login/alipayLogin")
      // 	.then(res => {
      // 		console.log(res)
      // 	});
    },
    submitAndroid() {
      let that = this;
      uni.login({
        //正式登录，弹出授权窗
        provider: "univerify",
        univerifyStyle: {
          // 自定义登录框样式
          fullScreen: true, // 是否全屏显示，true表示全屏模式，false表示非全屏模式，默认值为false。
          backgroundColor: "#ffffff", // 授权页面背景颜色，默认值：#ffffff
          icon: {
            path: "/static/logo.png", // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
          },
          phoneNum: {
            color: "#2281F5", // 手机号文字颜色 默认值：#000000
          },
          authButton: {
            normalColor: "#64b6a8", // 授权按钮正常状态背景颜色 默认值：#3479f5
            highlightColor: "#64b6a8", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
            disabledColor: "#64b6a8", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
            textColor: "#ffffff", // 授权按钮文字颜色 默认值：#ffffff
            title: "本机号码一键登录", // 授权按钮文案 默认值：“本机号码一键登录”
          },
          otherLoginButton: {
            visible: false, // 是否显示其他登录按钮，默认值：true
          },
          privacyTerms: {
            defaultCheckBoxState: true, // 条款勾选框初始状态 默认值： true
            uncheckedImage: "", // 可选 条款勾选框未选中状态图片（仅支持本地图片 建议尺寸 24x24px）(3.2.0+ 版本支持)
            checkedImage: "", // 可选 条款勾选框选中状态图片（仅支持本地图片 建议尺寸24x24px）(3.2.0+ 版本支持)
            checkBoxSize: 12, // 可选 条款勾选框大小，仅android支持
            textColor: "#666666", // 文字颜色 默认值：#BBBBBB
            termsColor: "#64B6A8", //  协议文字颜色 默认值： #5496E3
            prefix: "已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”
            suffix: " ", // 条款后的文案 默认值：“并使用本机号码登录”
            privacyItems: [
              // 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效
              {
                url: "https://bangbangtongcheng.com/agreement.html", // 点击跳转的协议详情页面
                title: "帮帮同城隐私协议", // 协议名称
              },
              {
                url: "https://bangbangtongcheng.com/agreement2.html", // 点击跳转的协议详情页面
                title: "帮帮同城用户协议", // 协议名称
              },
            ],
          },
          buttons: {
            // 自定义页面下方按钮仅全屏模式生效（3.1.14+ 版本支持）
            iconWidth: "45px", // 图标宽度（高度等比例缩放） 默认值：45px
            list: [
              {
                provider: "phone",
                iconPath: "/static/phone.png", // 图标路径仅支持本地图片
              },
              {
                provider: "weixin",
                iconPath: "/static/wx.png", // 图标路径仅支持本地图片
              },
              {
                provider: "Alipay",
                iconPath: "/static/Alipay.png", // 图标路径仅支持本地图片
              },
            ],
          },
        },
        success(res) {
          // 正式登录成功
          console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}

          // 在得到access_token后，通过callfunction调用云函数
          uniCloud.callFunction({
            name: "uni-getPhone", // 云函数名称
            data: {
              //传给云函数的参数
              access_token: res.authResult.access_token, // 客户端一键登录接口返回的access_token
              openid: res.authResult.openid, // 客户端一键登录接口返回的openid
            },
            success(callRes) {
              // console.log('调用云函数成功' + JSON.stringify(callRes))
              console.log("手机号登陆" + callRes.result.phoneNumber);
              that.$myRequest
                .post("/mob/login/phoneOneClickLogin", {
                  phone: callRes.result.phoneNumber,
                })
                .then((res) => {
                  console.log("手机号登陆结果:" + res);
                  uni.setStorageSync("Pduser", res.userInfo);
                  that.$store.dispatch("user/login", res.userInfo);
                  setTimeout(function () {
                    that.userInfo = uni.getStorageSync("Pduser");
                    that.phone = that.userInfo.phone;
                    if (that.phone) {
                      that.getUserPhone();
                      // that.$nextTick(()=>{
                      that.$refs.viewTabbar.fnc();
                      uni.hideLoading();
                      // })
                    }
                  }, 500);
                  uni.closeAuthView(); //关闭授权登录界面
                });
            },
            fail(callErr) {
              uni.showToast({
                title: "授权失败",
                icon: "none",
                mask: true,
              });
              console.log("调用云函数出错" + callErr);
            },
            // complete() {
            // 	uni.closeAuthView() //关闭授权登录界面
            // }
          });
        },
        fail(err) {
          // 正式登录失败
          if (err.provider == "phone") {
            uni.navigateTo({
              url: "/pages/login/login",
            });
          } else if (err.provider == "weixin") {
            that.handleThirdLoginApp();
            return;
          } else if (err.provider == "Alipay") {
            that.alipayLogin();
            return;
          }
        },
      });
    },
    handleThirdLoginApp() {
      console.log("App微信拉起授权");
      var that = this;
      uni.getProvider({
        service: "oauth",
        success: function (res) {
          console.log(res.provider); //支持微信、qq和微博等
          if (res.provider.indexOf("weixin")) {
            uni.login({
              provider: "weixin",
              success: function (loginRes) {
                console.log("App微信获取用户信息成功", loginRes);
                that.getApploginData(loginRes); //请求登录接口方法
              },
              fail: function (res) {
                console.log("App微信获取用户信息失败", res);
                uni.showToast({
                  title: "测试环境，无法使用",
                  icon: "none",
                });
              },
            });
          }
        },
      });
    },
    appleLogin() {
      console.log("苹果登录");
      var that = this;
      // 判断是 iOS13版本
      uni.login({
        provider: "apple",
        success: (loginRes) => {
          uni.getUserInfo({
            provider: "apple",
            success: (userInfoRes) => {
              console.log(userInfoRes);
              let data = userInfoRes.userInfo;
              let userInfo = {
                openid: data.openId,
                headimgurl: "",
                nickname: "苹果用户",
              };
              uni.setStorageSync("userInfo", JSON.stringify(userInfo));
              // console.log("aaaaaaa");
              that.getunis();
            },
            fail: (err) => {
              console.log(err);
            },
          });
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    getApploginData(data) {
      var that = this;
      //这边是前端自己去调微信用户信息的接口，根据接口需要请求，如果不需要前端去获取的话就交给后端，可省去次操作
      uni.request({
        url:
          "https://api.weixin.qq.com/sns/userinfo?access_token=" +
          data.authResult.access_token +
          "&openid=" +
          data.authResult.openid,
        method: "GET",
        dataType: "json",
        header: {
          "content-type": "application/x-www-form-urlencoded", // 默认值
        },
        success(res) {
          console.log("【登录回调啾啾啾】", res);
          let data = res.data;
          let userInfo = {
            openid: data.unionid,
            headimgurl: data.headimgurl,
            nickname: data.nickname,
          };
          uni.setStorageSync("userInfo", JSON.stringify(userInfo));
          // console.log("aaaaaaa");
          that.getunis();
        },
        fail() {},
      });
    },
    getunis() {
      let that = this;
      let userInfo = JSON.parse(uni.getStorageSync("userInfo"));
      // // #ifdef MP || H5
      // userInfo = JSON.parse(uni.getStorageSync("userInfo"));
      // //#endif
      // //#ifdef APP-PLUS
      // userInfo = JSON.parse(uni.getStorageSync("userInfo"));
      // // #endif
      console.log("openid是:", userInfo.openid);
      this.$myRequest
        .get("/mob/login/getUserByWXOpenId", {
          openId: userInfo.openid,
        })
        .then((res) => {
          console.log("获取的信息是:", res);
          this.userInfo = res.userInfo;
          if (!res.userInfo.phone) {
            if (res.userInfo == {} || !res.userInfo.phone) {
              uni.showToast({
                title: "请绑定手机号",
                icon: "none",
                mask: true,
              });
              setTimeout(function () {
                uni.navigateTo({
                  url: "/pages/login/register",
                });
              }, 1500);
            }
          } else {
            uni.showLoading({
              title: "登录中...",
            });
            uni.setStorageSync("Pduser", res.userInfo);
            that.$store.dispatch("user/login", res.userInfo);
            setTimeout(function () {
              that.userInfo = uni.getStorageSync("Pduser");
              that.phone = that.userInfo.phone;
              if (that.phone) {
                that.getUserPhone();
                that.$refs.viewTabbar.fnc();
                uni.hideLoading();
              }
            }, 500);
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.user-photo {
  flex-direction: column;
  align-items: center;
  margin: 0 22rpx 0 0;

  .label-box {
    div {
      position: relative;
      color: #ffffff;
      font-size: 22rpx;
      margin-top: 12rpx;

      image {
        width: 115rpx;
        height: 44rpx;
      }

      text {
        width: 100%;
        text-align: center;
        position: absolute;
        font-size: 22rpx;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -71%);
      }
    }
  }
}

.user-label {
  display: flex;
  justify-content: space-between;

  .vip-label {
    .vip-level {
      margin-bottom: 22rpx;

      .vip-rank {
        padding: 3rpx 10rpx;
        margin: 0 18rpx 0 0;
        background: #f6f0ff;
        border-radius: 6rpx 6rpx 6rpx 6rpx;
        opacity: 1;
        border: 2rpx solid #bd90d9;
        font-size: 24rpx;
        font-weight: 500;
        color: #bd90d9;
      }

      .all-dot {
      }
    }

    .star-vip {
      display: flex;
      align-items: center;
      width: 438rpx;
      justify-content: space-between;

      view {
        image {
          width: 35rpx;
          height: 35rpx;
        }
      }
    }
  }
}

// ------

.box {
  width: 100%;
  background-color: #fff;
  padding-bottom: 185rpx;
}

.list {
  position: relative;
  width: 690rpx;
  height: 80rpx;
  margin-left: 30rpx;
  background-color: #f2f2f2;
  border-radius: 10rpx;
  margin-top: 24rpx;

  .p1 {
    position: absolute;
    width: 410rpx;
    top: 22rpx;
    left: 30rpx;
    color: #666666;
    font-size: 26rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .p2 {
    position: absolute;
    top: 22rpx;
    right: 30rpx;
    font-size: 24rpx;
    color: #999;
  }
}

.kapian {
  width: 100%;
  margin-top: 60rpx;

  .li {
    position: relative;
    display: inline-block;
    margin-left: 30rpx;
    margin-bottom: 20rpx;

    image {
      width: 333rpx;
      height: 152rpx;
    }

    p {
      position: absolute;
      top: 54rpx;
      left: 30rpx;
      color: #fff;
      font-size: 30rpx;
    }
  }
}

.tit {
  margin-top: 20rpx;

  p {
    display: inline-block;
  }

  .p1 {
    font-size: 32rpx;
    margin-left: 30rpx;
  }

  .p2 {
    width: 92rpx;
    height: 46rpx;
    line-height: 48rpx;
    background: #e0e0e0;
    border-radius: 24rpx;
    text-align: center;
    margin-left: 470rpx;
    font-size: 22rpx;
  }
}

.info {
  position: absolute;
  right: 30rpx;
  bottom: 15rpx;
  width: 160rpx;
  font-size: 24rpx;
  padding: 5rpx 20rpx;
  border-radius: 100rpx;
  border: 2rpx solid #fff;
  color: #fff;
  text-align: center;
  // margin-left: 60rpx;
  /* #ifdef MP-WEIXIN */
  // padding: 0rpx 10rpx;
  // margin-left: 100rpx;
  /* #endif */
}

.top1 {
  // height: 680rpx;
  width: 100%;
  padding-bottom: 50rpx;
  background: #64b6a8;

  .title {
    text-align: center;
    // height: 88rpx;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    margin-bottom: 30rpx;
    // line-height: 46rpx;
  }

  line-height: 32rpx;

  .userInfo {
    display: flex;
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 30rpx;

    .header-img {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }

    .user {
      justify-content: space-between;
      padding-top: 11rpx;
      padding: 11rpx 0 0 0;
      background: transparent;
      border: none;
      margin: 0;
      // margin-left: 45rpx;
      /* #ifdef MP-WEIXIN */
      // margin-left: 45rpx;
      /* #endif */

      .name {
        position: relative;
        color: #fff;
        margin-bottom: 14rpx;

        .user-name {
          font-size: 34rpx;
          line-height: 50rpx;
          margin-bottom: 33rpx;
          // overflow: hidden;
          // white-space:nowrap;
        }

        .info {
          position: relative;
          right: 0rpx;
          width: 160rpx;
          font-size: 24rpx;
          padding: 5rpx 20rpx;
          border-radius: 100rpx;
          border: 2rpx solid #fff;
          text-align: center;
          // margin-left: 60rpx;
          /* #ifdef MP-WEIXIN */
          // font-size: 24rpx;
          // padding: 0rpx 10rpx;
          // border-radius: 100rpx;
          // border: 2rpx solid #fff;
          // text-align: center;
          // margin-left: 100rpx;
          /* #endif */
        }
      }

      .tag {
        display: flex;

        .tag-child {
          width: 120rpx;
          height: 44rpx;
          line-height: 44rpx;
          text-align: center;
          background: url(https://pic.bangbangtongcheng.com/static/my/tag.png) no-repeat;
          background-size: 100% 100%;
          // align-items: center;
          // justify-content: center;
          // display: flex;
          margin-right: 20rpx;
          color: #fff;
          font-size: 22rpx;
        }
      }
    }

    .user::after {
      border: none;
    }

    .set {
      width: 50rpx;
      height: 50rpx;
      position: absolute;
      top: -30%;
      // #ifdef MP-WEIXIN
      left: 60rpx;
      // #endif
      // #ifndef MP-WEIXIN
      right: 20px;
      // #endif
      transform: translateY(-50%);
      margin-bottom: 50px;
    }
  }

  .function {
    background: #fff;
    width: 690rpx;
    margin: 0 auto;
    border-radius: 20rpx;
    box-shadow: 0px 3rpx 6rpx rgba(102, 102, 102, 0.17);
    padding: 24rpx 20rpx;

    .flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .block {
      text-align: center;
      font-size: 24rpx;
      padding: 6rpx 0;

      image {
        width: 70rpx;
        height: 70rpx;
      }
    }
  }
}
</style>
